<template>
  <div>
    <a-modal
      width="37.5vw"
      v-model:open="dialogVisible"
      :footer="null"
      @cancel="closeDialog"
      class="relative"
    >
      <img
        src="~/assets/images/common/dialog-service.jpg"
        alt=""
        class="dialog-img"
      />
      <div class="content">
        <img src="~/assets/images/logo.png" alt="" class="logo" />
        <div class="title">{{ $t("form.service.title") }}</div>
        <a-form ref="formRef" :model="formData">
          <a-form-item
            name="name"
            :rules="[
              {
                required: true,
                message: $t('form.service.form.item_1.error_1'),
                trigger: 'blur',
              },
            ]"
          >
            <a-input
              size="large"
              v-model:value="formData.name"
              :placeholder="'*' + $t('form.service.form.item_1.placeholder')"
              allow-clear
            ></a-input>
          </a-form-item>
          <a-form-item
            name="email"
            :rules="[{ validator: checkEmail, trigger: 'blur' }]"
          >
            <a-input
              size="large"
              v-model:value="formData.email"
              :placeholder="'*' + $t('form.service.form.item_2.placeholder')"
              allow-clear
            ></a-input>
          </a-form-item>
          <a-form-item
            name="mobile"
            :rules="[{ validator: checkMobile, trigger: 'blur' }]"
          >
            <a-input
              size="large"
              v-model:value="formData.mobile"
              :placeholder="'*' + $t('form.service.form.item_3.placeholder')"
              allow-clear
            ></a-input>
          </a-form-item>
          <a-form-item
            name="company"
            :rules="[
              {
                required: true,
                message: $t('form.service.form.item_4.error_1'),
                trigger: 'blur',
              },
            ]"
          >
            <a-input
              :maxlength="50"
              size="large"
              v-model:value.trim="formData.company"
              :placeholder="'*' + $t('form.service.form.item_4.placeholder')"
              allow-clear
            ></a-input>
          </a-form-item>
        </a-form>
        <footer>
          <a-button type="default" size="large" @click="closeDialog">{{
            $t("btnText.cancel")
          }}</a-button>
          <a-button
            :loading="isLoading"
            type="primary"
            size="large"
            @click="submit"
            >{{ $t("btnText.imed_submit") }}</a-button
          >
        </footer>
      </div>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { getCurrentInstance, ref } from "vue";
import { SubmitJob } from "../../api/talent";
import { postRentApply } from "../../api/rent";
import { postSupportApply } from "../../api/support";
import type { RentApplyParams } from "../../types/rent";
import { message } from "ant-design-vue";
import { RegEmail, RegMobile } from "../../data/reg";
import { useMemberStore } from "../../store";
import { useRoute } from "vue-router";
import { postCourseSimpleSubmit } from "../../api/aviation";
import { postLmSubmit } from "../../api/api";

const $t = getCurrentInstance()?.appContext.config.globalProperties.$t;

const dialogVisible = ref(false);
const { profile } = useMemberStore();

const route = useRoute();

type SupportData = {
  id?: string | number;
  type: string;
  service_code: string;
  repair_service: string;
};
const props = defineProps<{
  submit_id?: string;
  supportData?: SupportData;
  type_key?: string;
}>();

const showDialog = () => {
  formData.value.name = profile?.last_name! + ' ' + profile?.first_name!;
  formData.value.email = profile?.email!;
  formData.value.mobile = profile?.mobile!;
  formData.value.company = profile?.company!;
  dialogVisible.value = true;
};

const isLoading = ref(false);

const checkEmail = (_rule: any, value: string) => {
  if (!value) return Promise.reject($t("form.service.form.item_2.error_1"));
  if (!RegEmail.test(value)) return Promise.reject($t("reg_rules.email"));
  return Promise.resolve();
};
const checkMobile = (_rule: any, value: string) => {
  if (!value) return Promise.reject($t("form.service.form.item_3.error_1"));
  if (!RegMobile.test(value)) return Promise.reject($t("reg_rules.mobile"));
  return Promise.resolve();
};

// 表单数据
const formData = ref<RentApplyParams>({
  name: "",
  email: "",
  mobile: "",
  company: "",
  remark: "",
  tanlent_id: "",
});

// 提交表单
const submit = () => {
  formRef.value.validate().then(async () => {
    isLoading.value = true;
    let res;
    if (route.path.includes("/job")) {
      formData.value.tanlent_id = props.submit_id + "";
      delete formData.value.submit_id;
      res = await SubmitJob(formData.value);
    } else if (route.path.includes("/support")) {
      let { id: talent_id, ...params } = props.supportData!;
      Object.assign(formData.value, { ...params, talent_id });
      res = await postSupportApply(formData.value);
    } else if (route.path.includes("/rent")) {
      formData.value.submit_id = props.submit_id + "";
      delete formData.value.tanlent_id;
      res = await postRentApply(formData.value);
    } else if (props.type_key == "simple_course") {
      formData.value.submit_id = props.submit_id + "";
      delete formData.value.tanlent_id;
      res = await postCourseSimpleSubmit(formData.value);
    } else if (props.type_key == "lm") {
      formData.value.submit_id = props.submit_id + "";
      delete formData.value.tanlent_id;
      res = await postLmSubmit(formData.value);
    }
    if (res?.code === 200) {
      closeDialog();
      message.success($t("message.success.submit"));
      isLoading.value = false;
    } else {
      message.error($t("message.error.submit"));
      isLoading.value = false;
    }
  });
};

// 清空表单
const formRef = ref();
const closeDialog = () => {
  dialogVisible.value = false;
  formRef.value.resetFields();
  formData.value = {
    name: "",
    email: "",
    mobile: "",
    company: "",
    remark: "",
    tanlent_id: "",
  };
};

defineExpose({
  show: showDialog,
  close: closeDialog,
});
</script>
<style scoped lang="less">
.ant-form {
  margin: 40px 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  .ant-form-item {
    &:nth-child(2n) {
      margin-left: 12px;
    }
    &:nth-child(2n + 1) {
      margin-right: 12px;
    }
  }
}
footer {
  display: flex;
  justify-content: center;
  gap: 12px;
  .ant-btn {
    height: 40px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
  }
}
img.logo {
  border-radius: 0;
  margin-top: 24px;
}

.title {
  font-size: 18px;
  color: #172026;
  margin: 24px 0;
}
.dialog-img {
  width: 260px;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  object-fit: cover;
  z-index: 1;
}
.content {
  display: flex;
  flex-direction: column;
  margin-left: 260px;
  padding-top: 24px;
  padding-bottom: 64px;
}
</style>
